<template>
  <div class="cms_order">
    <left-menus active="2"></left-menus>
    <div class="cms_container">
      <bread-crumb :title="{group:'订单管理',name:'退款订单'}"></bread-crumb>
      <div class="cms_table_box">
        <h3>退款列表</h3>
        <div class="cms_search">
          <el-input v-model="params.orderNo" placeholder="订单号" clearable></el-input>
          <el-input v-model="params.userName" placeholder="买家账号" clearable></el-input>
          <el-select v-model="params.cnySource" placeholder="支付来源" :clearable="true">
            <el-option
              v-for="item in [{label:'微信',value:'wx'},{label:'支付宝',value:'alipay'}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="params.isInvoice" placeholder="发票" :clearable="true">
            <el-option
              v-for="item in [{label:'需要',value:1},{label:'不需要',value:0}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="params.isComment" placeholder="评价" :clearable="true">
            <el-option
              v-for="item in [{label:'已评价',value:1},{label:'未评价',value:0}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="params.status" placeholder="订单状态" :clearable="true">
            <el-option
              v-for="item in [{label:'拒收',value:-3},{label:'未付款',value:-2},{label:'取消',value:-1},{label:'待发货',value:0},{label:'配送中',value:1},{label:'确认收货',value:2},{label:'已退款',value:3}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <!-- <el-select v-model="params.refundStatus" placeholder="退款状态" :clearable="true" >
        <el-option
          v-for="item in [{label:'退款中',value:0},{label:'退款完成',value:1},{label:'取消退款',value:2}]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
          </el-select>-->
          <el-button type="primary" @click="inputSearch">查询</el-button>
        </div>
        <div class="cms_table">
          <el-table
            :data="tableLists"
            style="width: 100%"
            border
            :header-cell-style="{color:'#606266'}"
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table
                  :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
                  :data="scope.row.orderGoodsList"
                  border
                  style="width: 100%"
                >
                  <el-table-column label="商品" width="260">
                    <template slot-scope="scope">
                      <div class="merk_goods">
                        <img :src="scope.row.pic" alt />
                        <div>
                          <p>{{scope.row.goodsName}}</p>
                          <span
                            v-for="(sku,attr) in scope.row.specDes"
                            :key="sku"
                          >{{attr + ':' + sku}}</span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="goodsTotalPrice" label="总价格" width="180"></el-table-column>
                  <el-table-column prop="cny" label="人民币"></el-table-column>
                  <el-table-column prop="points" label="积分"></el-table-column>
                  <el-table-column prop="count" label="件数"></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="订单号" width="160"></el-table-column>
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column label="支付方式" width="90">
              <template slot-scope="scope">
                <p>{{scope.row.cnySource == 'wx' ? '微信':'支付宝'}}</p>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" width="90">
              <template slot-scope="scope">
                <p>{{['拒收','未付款','用户取消','待发货','配送中','确认收货','已退款'][parseInt(scope.row.status) + 3]}}</p>
              </template>
            </el-table-column>
            <el-table-column label="退款状态" width="90">
              <template slot-scope="scope">
                <p>{{['退款中', '退款完成','取消退款'][parseInt(scope.row.refundStatus || 0)]}}</p>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150">
              <template slot-scope="scope">
                <p style="font-size:12px">{{scope.row.createTime | dateformat}}</p>
              </template>
            </el-table-column>
            <el-table-column label="评论">
              <template slot-scope="scope">
                <p style="font-size:12px">{{scope.row.remark}}</p>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template slot-scope="scope" class="cms_btns">
                <el-button
                  class="cms_btn"
                  @click="seeDetail(scope.row)"
                  type="primary"
                  size="mini"
                  plain
                >详情</el-button>
                <el-button
                  class="cms_btn"
                  @click="deleteOrder(scope.row.id)"
                  type="danger"
                  size="mini"
                  v-if="[1,2].includes(scope.row.refundStatus)"
                  plain
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="cms_pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next,jumper"
            :total="total"
            :current-page="currentPage"
          ></el-pagination>
        </div>
      </div>
      <el-dialog
        title="删除订单"
        :visible.sync="deleteDialogVisible"
        width="30%"
        @close="deleteDialogVisible = false"
      >
        <el-input type="textarea" v-model="deleteReason" placeholder="请输入删除订单原因"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="suerDelete()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="退款详情"
        width="80%"
        :visible.sync="orderDetailVisible"
        @close="orderDetailVisible = false;isSeeExpressFromDetail=false"
      >
        <div v-if="orderDetail">
          <div class="cms_o_status">
            <!-- <i class="iconfont" :class="['cms_s0','cms_s1','cms_s2','cms_s3','cms_s3','cms_s4'][orderDetail.status + 3]">{{['&#xe625;','&#xe63f;','&#xe67a;','&#xe606;','&#xe620;','&#xe63c;'][orderDetail.status + 3]}}</i> -->
            <div>
              <p>订单状态： {{['拒收','未付款','取消','待发货','配送中','确认收货','已退款'][orderDetail.status + 3]}}</p>
              <p style="margin:10px 0;width:100%;text-align:center">
                退款状态:
                <span
                  style="color:red;"
                >{{['退款中', '退款完成','取消退款'][parseInt(orderDetail.refundStatus || 0)]}}</span>
              </p>
            </div>
          </div>
          <ul class="merk_detail">
            <li>详细信息</li>
            <li>订单编号: &nbsp;{{orderDetail.orderNo}}</li>
            <li>店铺名称: &nbsp;{{orderDetail.storeName}}</li>
            <li>昵称: &nbsp;{{orderDetail.nickName}}</li>
            <li>账号: &nbsp;{{orderDetail.userName}}</li>
            <li>支付方式: &nbsp;{{orderDetail.cnySource == 'wx' ?'微信':'支付宝'}}</li>
            <li>发票类型: &nbsp;{{orderDetail.isInvoice ? '开发票':'不开发票'}}</li>
            <li>运费: &nbsp;￥{{orderDetail.deliverMoney}}</li>
            <li>收货人: &nbsp;{{orderDetail.addressee}}</li>
            <li>手机号: &nbsp;{{orderDetail.phone}}</li>
            <li style="width:100%">收货地址: &nbsp;{{orderDetail.address}}</li>
          </ul>
          <ul class="merk_express" v-if="expressInfo">
            <li>物流信息</li>
            <li>快递单号: &nbsp;{{expressInfo.number}}</li>
            <li>物流公司: &nbsp;{{expressInfo.com}}</li>
            <li>
              物流跟踪:
              <span
                class="merk_span"
                @click="isSeeExpressFromDetail = !isSeeExpressFromDetail"
              >{{isSeeExpressFromDetail ? '收起':'查看'}}</span>
            </li>
          </ul>
          <div class="block cms_block" v-if="expressInfo && isSeeExpressFromDetail">
            <el-timeline class="express_timeline">
              <el-timeline-item
                v-for="(activity, index) in expressInfo.traces"
                :key="index"
                :type="index ===0 ? 'primary' : ''"
                :timestamp="activity.time"
              >{{activity.desc}}</el-timeline-item>
            </el-timeline>
          </div>
          <el-table
            class="cms_detail_table"
            :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
            :data="orderDetail.orderGoodsList"
            border
            style="width: 100%;margin-top:30px"
          >
            <el-table-column label="商品" width="300">
              <template slot-scope="scope">
                <div class="merk_goods">
                  <img :src="scope.row.pic" alt />
                  <div>
                    <p>{{scope.row.goodsName}}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column prop="cny" label="人民币"></el-table-column>
            <el-table-column prop="points" label="积分"></el-table-column>
            <el-table-column prop="points" label="退款状态" width="400">
              <template slot-scope="scope">
                <div v-if="scope.row.isRefund">
                  <p
                    class="cms_status"
                  >{{['等待卖家处理', '待退货', '卖家已拒绝', '已取消', '退货中', '退款完成'][scope.row.status]}}</p>
                  <div class="cms_refund">
                    <ul>
                      <li>
                        <span>退款订单号：</span>
                        <span>{{scope.row.refundNo}}</span>
                      </li>
                      <li>
                        <span>退款人民币：</span>
                        <span>￥{{scope.row.refundMoney}}</span>
                      </li>
                      <li>
                        <span>退 款 积 分：</span>
                        <span>{{scope.row.points}}</span>
                      </li>
                      <li>
                        <span>退 款 原 因：</span>
                        <span>{{ scope.row.refundReason}}</span>
                      </li>
                      <li>
                        <span>退 款 时 间：</span>
                        <span>{{scope.row.applyTime | dateformat}}</span>
                      </li>
                      <li v-if="scope.row.companyName">
                        <span>物 流 公 司：</span>
                        <span>{{scope.row.companyName}}</span>
                      </li>
                      <li v-if="scope.row.returnNo">
                        <span>物 流 单 号：</span>
                        <span>{{scope.row.returnNo}}</span>
                      </li>
                      <li v-if="scope.row.comId">
                        <span>物 流 追 踪：</span>
                        <a
                          style="color:#409EFF;cursor:pointer"
                          @click="seeRefunExpress(scope.row)"
                        >查看</a>
                      </li>
                      <li v-if="scope.row.pics && scope.row.pics.length > 0">
                        <el-image
                          v-for="(pic,index) in scope.row.pics"
                          style="max-width: 100px; max-height: 100px;margin-right:10px;margin:10px 10px 10px 0"
                          :src="pic"
                          :key="index"
                          :preview-src-list="scope.row.pics"
                        ></el-image>
                      </li>
                    </ul>
                    <ul v-if="scope.row.status === 2">
                      <li>
                        <span>拒 绝 原 因：</span>
                        <span>{{ scope.row.replyContent}}</span>
                      </li>
                      <li>
                        <span>拒 绝 时 间：</span>
                        <span>{{ scope.row.replyTime | dateformat}}</span>
                      </li>
                      <li v-if="scope.row.replyPics && scope.row.replyPics.length > 0">
                        <el-image
                          v-for="(pic,index) in scope.row.replyPics"
                          style="max-width: 100px; max-height: 100px;margin:10px 10px 10px 0"
                          :src="pic"
                          :key="index"
                          :preview-src-list="scope.row.pics"
                        ></el-image>
                      </li>
                    </ul>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.refundNo">
                  <div v-if="scope.row.status == 0">
                    <el-button
                      type="primary"
                      class="cms_operate"
                      plain
                      @click="refundClick(scope.row,1)"
                    >同意</el-button>
                    <el-button
                      type="warning"
                      class="cms_operate"
                      plain
                      @click="refundClick(scope.row,2)"
                    >拒绝</el-button>
                  </div>
                  <el-button
                    v-if="scope.row.status == 4"
                    type="success"
                    plain
                    @click="suerRefund(scope.row.refundId)"
                  >退款</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="merk_total">
            <p>
              <span>运 费:</span>
              <span>￥{{orderDetail.deliverMoney}}</span>
            </p>
            <p>
              <span>积 分:</span>
              <span>{{orderDetail.pointsTotal}}</span>
            </p>
            <p>
              <span>人民币:</span>
              <span>￥{{orderDetail.cnyTotal}}</span>
            </p>
            <p>
              <span style="color:#000">总支付:</span>
              <span
                style="color:red;font-size:15px"
              >￥{{orderDetail.cnyTotal + (orderDetail.deliverMoney || 0)}}</span>
            </p>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        title="拒绝退款"
        :visible.sync="refundVisible"
        width="40%"
        @close="refundVisible = false"
      >
        <div style="padding:0 20px">
          <el-upload
            style="margin-bottom:30px"
            :action="BASE_URL"
            list-type="picture-card"
            :show-file-list="false"
            :data="{'folderName':'shop'}"
            :headers="{'Authorization':Authorization}"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="refundImg" :src="refundImg" alt style="width:100%;height:100%" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
          <el-input type="textarea" v-model="refundReason" placeholder="请输入拒绝退款原因"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="refundVisible = false">取 消</el-button>
          <el-button type="primary" @click="cancelRefund()">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="退款物流信息" :visible="isShowRefundExpess" @close="isShowRefundExpess = false">
        <div class="block cms_block" v-if="refundExpress">
          <el-timeline class="express_timeline">
            <el-timeline-item
              v-for="(activity, index) in refundExpress.traces"
              :key="index"
              :type="index ===0 ? 'primary' : ''"
              :timestamp="activity.time"
            >{{activity.desc}}</el-timeline-item>
          </el-timeline>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="isShowRefundExpess = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  orderListApi,
  deleteOrderApi,
  backMonenyOrderApi,
  expressOrderApi,
  orderRdfundDetailApi,
  orderDetailApi,
  sureRefundApi,
} from "@/api/request.js";
import LeftMenus from "@/views/components/OrderLeftMenus.vue";
import BreadCrumb from "@/views/components/Breadcrumb";
import { BASE_URL } from "@/utils/service.js";
export default {
  data() {
    return {
      BASE_URL,
      params: {
        // 人民币支付来源  wx / 支付宝
        cnySource: "",
        page: 1,
        // 是否评价
        isComment: "",
        // 是否需要发票 0否 1是
        isInvoice: "",
        orderNo: "",
        // 订单识别码
        orderSn: "",
        pageSize: 10,
        // 订单状态-3拒收，-2未付款，-1用户取消，0待发货，1配送中，2确认收货
        status: "",
        // 店铺名称
        storeName: "",
        uid: "",
        // 买家账号
        userName: "",
        isRefund: 1,
        // 退款状态
        refundStatus: "",
      },
      tableLists: [],
      total: 0,
      currentPage: 1,
      deleteDialogVisible: false,
      deleteReason: "",
      expressInfo: null,
      expressDiagVisible: false,
      orderDetailVisible: false,
      orderDetail: {},
      isSeeExpressFromDetail: false,
      refundVisible: false,
      refundReason: "",
      refundImg: "",
      refundExpress: null,
      isShowRefundExpess: false,
    };
  },
  components: {
    BreadCrumb,
    LeftMenus,
  },
  created() {
    this.Authorization = localStorage.getItem("intrachaincode");
  },
  mounted() {
    this.initList();
  },
  methods: {
    initList() {
      const { storeId } = this.$store.state.print.all;
      const that = this;
      let params = { storeId, isBusiness: 1 };
      for (let key in this.params) {
        if (this.params[key] !== "") {
          params[key] = this.params[key];
        }
      }
      orderListApi(params).then((res) => {
        if (res.data.code === 200) {
          let { orderResList, count } = res.data.data;
          console.log(orderResList)
          orderResList.forEach((li) => {
            li.orderGoodsList.forEach((goods) => {
              goods.specDes = JSON.parse(
                goods.specDes.replace(/^["|“] | ["|”]$/g, "'")
              );
            });
          });
          that.tableLists = orderResList;
          that.total = count;
        }
      });
    },
    handleSizeChange(size) {
      this.params.pageSize = size;
      this.initList();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.initList();
    },
    inputSearch() {
      clearTimeout(this.setTimer);
      this.setTimer = setTimeout(() => {
        this.params.page = 1;
        this.currentPage = 1;
        this.initList();
      }, 200);
    },
    deleteOrder(id) {
      this.deleteDialogVisible = true;
      this.orderId = id;
    },
    suerDelete() {
      if (!this.deleteReason) {
        this.$message({
          type: "error",
          message: "请填写删除订单原因",
        });
        return;
      }
      const { userName, uid } = this.$store.state.print.all;
      deleteOrderApi({
        userName,
        uid,
        reason: this.deleteReason,
        type: 1,
        orderId: this.orderId,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: "删除订单成功",
          });
          this.initList();
          this.deleteDialogVisible = false;
          this.deleteReason = "";
        } else {
          this.$message({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },
    suerRefund(id) {
      this.$confirm("确定要退款吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sureRefundApi({ refundId: id }).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "退款成功",
              });
              this.orderDetailVisible = false;
              this.initList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退款",
          });
        });
    },
    refundClick(scope, type) {
      const id = scope.refundId;
      if (type === 1) {
        // 商家同意
        this.$confirm("确定同意退款吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            backMonenyOrderApi({ refundId: id }, 1).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  type: "success",
                  message: "同意退款成功",
                });
                this.initList();
                this.orderDetail.orderGoodsList.forEach((good, index) => {
                  if (good.refundId === id) {
                    good.status = 1;
                    this.$set(this.orderDetail.orderGoodsList, index, good);
                  }
                });
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.message,
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消退款",
            });
          });
      } else {
        // 商家拒绝
        this.refundVisible = true;
        this.refundId = id;
      }
    },
    cancelRefund() {
      backMonenyOrderApi(
        {
          refundId: this.refundId,
          reasons: this.refundReason,
          pic: this.refundImg,
        },
        2
      ).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: "success",
            message: "拒绝成功",
          });
          this.initList();
          this.orderDetail.orderGoodsList.forEach((good, index) => {
            if (good.refundId === this.refundId) {
              good.status = 2;
              good.replyContent = this.refundReason;
              good.replyTime = new Date().getTime();
              this.$set(this.orderDetail.orderGoodsList, index, good);
            }
          });
          this.refundImg = "";
          this.refundReason = "";
          this.refundVisible = false;
        } else {
          this.$message({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },
    expressDetail(id) {
      expressOrderApi({ orderId: id }).then((res) => {
        if (res.data.code === 200) {
          res.data.data.traces.reverse();
          this.expressInfo = res.data.data;
        } else {
          this.$message({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },
    seeRefunExpress(scope) {
      this.refundExpress = null;
      const { returnNo, comId } = scope;
      expressOrderApi({ returnNo, comId }).then((res) => {
        if (res.data.code === 200) {
          res.data.data.traces.reverse();
          this.refundExpress = res.data.data;
          this.isShowRefundExpess = true;
        } else {
          this.$message({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },
    seeDetail(scope) {
      if (this.orderDetail.id === scope.id) {
        this.orderDetailVisible = true;
        return;
      }
      this.orderDetail = {};
      this.expressInfo = null;
      orderDetailApi({ orderId: scope.id }).then((res) => {
        if (res.data.code === 200) {
          const { address, addressee, phone } = res.data.data;
          scope = Object.assign(scope, { address, addressee, phone });
          this.orderDetail = scope;
          this.orderDetailVisible = true;
          [1, 2].includes(scope.status) && this.expressDetail(scope.id, 2);
          for (let index = 0; index < scope.orderGoodsList.length; index++) {
            scope.orderGoodsList[index].isRefund &&
              orderRdfundDetailApi({
                orderId: scope.id,
                specId: scope.orderGoodsList[index].specId,
              }).then((res) => {
                if (res.data.code === 200) {
                  if (res.data.data) {
                    let {
                      applyTime,
                      status,
                      refundNo,
                      refundMoney,
                      points,
                      refundReason,
                      pics,
                      replyTime,
                      replyContent,
                      replyPics,
                      refundId,
                      returnNo,
                      companyName,
                      comId,
                    } = res.data.data;
                    pics = (pics && pics.split(",")) || [];
                    replyPics = (replyPics && replyPics.split(",")) || [];
                    this.$set(
                      scope.orderGoodsList,
                      index,
                      Object.assign(scope.orderGoodsList[index], {
                        returnNo,
                        comId,
                        companyName,
                        applyTime,
                        status,
                        refundNo,
                        refundMoney,
                        points,
                        refundReason,
                        pics,
                        replyTime,
                        replyContent,
                        replyPics,
                        refundId,
                      })
                    );
                  }
                } else {
                  this.$message({
                    type: "warning",
                    message: res.data.message,
                  });
                }
              });
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.message,
          });
        }
      });
    },
    beforeAvatarUpload(file) {
      // 上传图片
      const typeArr = ["image/jpeg", "image/png", "image/gif"];
      const isLt2M = file.size / 1024 / 1024 < 1;
      const typeType = typeArr.indexOf(file.type);
      if (typeType < 0) {
        this.$message.error("请选择JPG/PNG/GIF格式的图片!");
      }
      if (!isLt2M) {
        this.$message.error("请选择不超过1MB的图片!");
      }
      return typeType >= 0 && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.refundImg = res.data.url;
    },
  },
};
</script>

<style lang="scss" scoped>
.cms_order {
  display: flex;
  justify-content: center;
}
.cms_container {
  width: 1100px;
  background-color: #fff;
  min-height: 400px;
  padding: 10px 20px 40px;
}
.cms_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px;
  .el-input {
    width: 200px;
    margin: 5px;
  }
  .el-select {
    margin: 5px;
  }
  >>> input {
    padding: 0 10px !important;
  }
}
.cms_pagination {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 40px;
}
.cms_table_box {
  border: 1px solid whitesmoke;
  margin-top: 15px;
  padding-bottom: 30px;
  h3 {
    padding: 10px;
    font-size: 14px;
    background-color: whitesmoke;
    border-top: 2px solid #b0b8b8;
  }
  .cms_table {
    padding: 10px;
  }
  .cms_btn {
    margin-top: 5px;
    margin-left: 0 !important;
  }
  .cms_btns {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.express_item span:first-child {
  display: inline-block;
  width: 100px;
  margin: 10px 20px;
}
.express_timeline {
  margin: 30px 20px 10px;
}
.merk_goods {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  img {
    width: 80px;
    display: block;
    background-color: #eee;
    height: 80px;
    margin-right: 10px;
  }
  > div {
    flex: 1;
  }
  p {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-bottom: 6px;
  }
  span {
    display: block;
    font-size: 12px;
    color: #999;
  }
}
.cms_block {
  margin-left: -20px;
}
.express_timeline {
  margin: 30px 20px 10px;
}
.cms_o_status {
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  flex-wrap: wrap;
  p {
    font-size: 16px;
    color: #000;
  }
}
@font-face {
  font-family: "iconfont"; /* project id 1772366 */
  src: url("//at.alicdn.com/t/font_1772366_u05qpja3k0s.eot");
  src: url("//at.alicdn.com/t/font_1772366_u05qpja3k0s.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1772366_u05qpja3k0s.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1772366_u05qpja3k0s.woff") format("woff"),
    url("//at.alicdn.com/t/font_1772366_u05qpja3k0s.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1772366_u05qpja3k0s.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.cms_s0 {
  color: red;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid red;
  border-radius: 100%;
  margin-right: 10px;
}
.cms_s1 {
  color: red;
  font-size: 30px;
  margin-right: 10px;
}
.cms_s2 {
  color: orange;
  font-size: 30px;
  margin-right: 10px;
}
.cms_s4 {
  color: green;
  font-size: 40px;
  margin-right: 10px;
}
.cms_s3 {
  color: #00baad;
  font-size: 30px;
  margin-right: 10px;
}
.merk_detail li,
.merk_express li {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  display: inline-block;
  width: 34%;
}
.merk_detail li:first-child,
.merk_express li:first-child {
  line-height: 30px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0;
  display: block;
  width: 100%;
}
.merk_span {
  margin-left: 5px;
  color: #0443e6;
  cursor: pointer;
}
.merk_goods {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  img {
    width: 80px;
    display: block;
    background-color: #eee;
    height: 80px;
    margin-right: 10px;
  }
  > div {
    flex: 1;
  }
  p {
    font-size: 12px;
    color: #333;
    font-weight: 600;
  }
}
.merk_total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 10px;
  margin-right: 20px;
  p {
    font-size: 600;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    span:last-child {
      font-size: 13px;
      display: inline-block;
      width: 80px;
    }
    span:first-child {
      display: inline-block;
      text-align: right;
      margin-right: 10px;
    }
  }
}
.cms_detail_table /deep/ tr:first-child:hover td:last-child {
  background-color: #fff !important;
}
.cms_table1 /deep/ tr td {
  background-color: #fff !important;
}
.cms_express {
  display: flex;
  flex-direction: row;
  align-items: center;
  img {
    width: 24px;
    margin-right: 10px;
  }
}
.cms_status {
  color: red;
  margin-bottom: 10px;
}
.cms_refund {
  ul:first-child {
    border-bottom: 1px solid #eee;
  }
  li {
    font-size: 13px;
    line-height: 20px;
    span {
      display: inline-block;
      &:first-child {
        width: 80px;
        color: #000;
      }
      &:last-child {
        width: 280px;
      }
      vertical-align: top;
    }
  }
  img {
    display: inline-block;
    max-width: 80px;
    max-height: 80px;
    min-height: 10px;
    background-color: #eee;
    margin-right: 10px;
    margin-top: 10px;
  }
}
.cms_operate {
  margin: 0 0 10px 0;
}
</style>
